<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchPutGoodsApply } from '@/api/goods/apply'
import { useUserStoreHook } from '@/store/modules/user';
import { filterDate } from '@/utils/format'
import TimeLine from '@/components/timeLine/index.vue'

const props = defineProps({
  goodsFormDialog: Boolean,
  dialogData: Object,
  recordData: Object,
});
const emit = defineEmits(["closeDialog"]);
const closeDialog = () => {
  emit("closeDialog");
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  result: 0,
  remark: '',
})

const rules = reactive<FormRules>({
  result: [
    {
      required: true,
      message: '请选择审批意见',
      trigger: 'change',
    },
  ],
  remark: [
    {
      required: true,
      message: '请填写审批备注',
      trigger: 'blur',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let status = 0
      if (props.dialogData.status == 0) {
        status = ruleForm.result
      } else {
        status = Number(ruleForm.result) + 4
      }
      const params = {
        id: props.dialogData.id,
        personId: useUserStoreHook().userInfo.id,
        status: status,
        remark: ruleForm.remark,
      }
      fetchPutGoodsApply(params).then((res: { code: number; }) => {
        if (res.code == 200) {
          emit("closeDialog");
          ElMessage({
            message: '审批成功',
            type: 'success'
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit("closeDialog");
}
</script>

<template>
  <el-dialog :model-value="props.goodsFormDialog" title="申请详情" @close="closeDialog" v-if="props.dialogData"
    class="infoDialog-content">
    <el-row class="row-col-1 row-header">
      <el-col :span="24" class="font-weight">申请人信息</el-col>
    </el-row>
    <el-row class="row-col-3">
      <el-col :span="8">姓名：{{ props.dialogData.User.name }}</el-col>
      <el-col :span="8">性别：{{ props.dialogData.User.gender == 0 ? '男' : '女' }}</el-col>
      <el-col :span="8">手机号：{{ props.dialogData.User.phone }}</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">所在社团：{{ props.dialogData.User.Society.name }}</el-col>
      <el-col :span="12">职位：部长/会长</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">学号：{{ props.dialogData.User.stuCode }}</el-col>
      <el-col :span="12">学院：{{ props.dialogData.User.College.name }}</el-col>
    </el-row>
    <el-row class="row-col-2 row-footer mb-20">
      <el-col :span="12">专业：{{ props.dialogData.User.Major.name }}</el-col>
      <el-col :span="12">年级：{{ props.dialogData.User.Grade.name }}</el-col>
    </el-row>

    <el-row class="row-col-1 row-header ">
      <el-col :span="24" class="font-weight">申请内容</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">申请类型：借用申请</el-col>
      <el-col :span="12">申请时间：{{ filterDate(props.dialogData.createdAt) }}</el-col>
    </el-row>
    <el-row class="row-col-3">
      <el-col :span="8">物资名称：{{ props.dialogData.Good.name }}</el-col>
      <el-col :span="8">物资单价(元)：{{ props.dialogData.Good.price }}</el-col>
      <el-col :span="8">入库单位：{{ props.dialogData.Good.unit }}</el-col>
    </el-row>
    <el-row class="row-col-1">
      <el-col :span="24">物资信息：{{ props.dialogData.Good.goodsInfo }}</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12" class="theme-blue">申请数量：{{ props.dialogData.applyNumber }}</el-col>
      <el-col :span="12" class="theme-blue">库存数量：{{ props.dialogData.Good.stockNum }}</el-col>
    </el-row>
    <el-row class="row-col-1 row-footer mb-20">
      <el-col :span="24">申请原因：{{ props.dialogData.applyReason }}</el-col>
    </el-row>

    <div v-if="props.dialogData.status > 0">
      <h3 class="mb-20">审批记录</h3>
      <TimeLine :recordData="recordData" />
    </div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm mb-20"
      size="default" status-icon v-if="props.dialogData.status == 0 || props.dialogData.status == 4">
      <el-form-item label="审批意见：" prop="result">
        <el-radio-group v-model="ruleForm.result">
          <el-radio label="1" border class="form-radio">同意</el-radio>
          <el-radio label="2" border>驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批备注：" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" />
      </el-form-item>
      <el-form-item class="form-footer-box">
        <el-button @click="resetForm(ruleFormRef)" class="btn-white">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn-green">
          确定
        </el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>


<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 2rem;

  .el-form-item {
    margin-top: 2rem;
  }

  .form-radio {
    margin-right: 2rem;
  }
}


.infoDialog-content {
  max-height: 600px;
  overflow: auto;
}
</style>
<style lang="scss" >
.form-footer-box {
  .el-form-item__content {
    display: flex;
    justify-content: end;
  }
}
</style>
